<template>
  <p class="ml-5 mt-2 text-16px">{{ message.title }}</p>
  <p class="ml-5 mt-2 text-14px font-light">{{ dayjs(message.createdAt).format("YYYY-MM-DD HH:mm") }}</p>
  <p class="h m-3 w-88 justify-center"></p>

  <ul class="ul">
    <li class="">
      <p class="">订单编号:</p>{{ message._id }}
    </li>
    <li class="">
      <p class="">事项描述:</p>{{ message.content }}
    </li>
  </ul>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { useMessagesStore } from '../../stores/messages';
import dayjs from 'dayjs';
const message = ref({})

const allMessages = useMessagesStore()

onLoad((option) => {
  message.value = allMessages.messages.find(v => v._id === option.id)
  // console.log('messages:', allMessages.messages)
  //console.log(message.value)
  // var content = message.value.content;
  // console.log(content);
  // message.value.content = truncate(content, content.indexOf("id"));
})

function truncate(str, limit) {
  if (str.length > limit) {
    str = str.substr(0, limit);
  }
  else { return str; }
  return str;
}

</script>

<style>
.span1 {
  word-break: keep-all;
  white-space: nowrap;
}

.h {
  border-bottom: 1px solid gray;
}

.ul {
  flex: content;
  padding: 10px;
  margin: 10px;
  line-height: 20px;
  color: black;
  font-size: 14px;
  font-weight: lighter;
  background-color: whitesmoke;
  border: 1px solid #4c9fff;
  list-style: none;
}

/* 
.ul :hover {
  cursor: pointer;
  background-color: #4c9fff;
} */
</style>